	<template>
		<view class="container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in list">
					<view class="swiper-item">
						<image :src="'../../static'+item.icon" mode="" style="width: 100%; height: 240px;"></image>
					</view>
				</swiper-item>
			</swiper>
			<uni-section title="菜品类别" sub-title="" type="square">
				<uni-grid :column="4">
					<uni-grid-item v-for="item,index in typelist">
						<view style="display: flex; flex-direction: column; align-items: center; padding-top: 10px;">
							<image :src="'../../static/'+item.icon" style="width: 100rpx; height: 100rpx; " mode="">
							</image>
							<view>{{item.typename}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
			<uni-section title="乡村新闻" sub-title="" type="square">
				<view class="tab-container">
					<view class="tab-item" @click="categoryChange" :data-index="item.id-1"
						:class=" {'tab-active':activeIndex==item.id-1} " v-for="item,index in categorylist">
						{{item.categoryname}}
					</view>
				</view>
				<swiper :current="activeIndex" @change="activeIndexChange" style="height:200px">
					<swiper-item v-for="category in categorylist" style="width: 100%;">
						<view class="swiper-item">
							<uni-list>
								<uni-list-item v-for="(item,index) in newslist.filter((i)=> i.type==category.categoryname)"
									:key="item.id" :title="item.title" :to='"/pages/home/news/news?id="+item.id'>
								</uni-list-item>
							</uni-list>
						</view>
					</swiper-item>
				</swiper>

			</uni-section>
		</view>
	</template>


	<script>
		export default {
			data() {
				return {
					"categorylist": [],
					"activeIndex": 0,
					"newslist": [],
					"list": [{
							"id": 1,
							"name": "烤鸭",
							"type": "肉类",
							"icon": "/images/1.png",
							"description": "烤鸭是北京和南京的一道特色名菜,属于北京菜或金陵菜,该菜品以色泽红艳,肉质细嫩,味道醇厚,肥而不腻的特色,被誉为“天下美味”而驰名中外,其色泽略黄,柔软淡香,夹卷其他荤素食物食用,为宴席常用菜点,更是家常风味美食。",
							"price": 88.5
						},
						{
							"id": 2,
							"name": "回锅肉",
							"type": "肉类",
							"icon": "/images/2.png",
							"description": "回锅肉，是一种四川传统菜式中家常（味型）菜肴的代表菜肴之一，属于川菜系列。制作原料主要有猪后臀肉（二刀肉）、青椒、蒜苗等，口味独特，色泽红亮，肥而不腻。回锅肉起源四川农村地区。古代时期称作油爆锅，四川地区大部分家庭都会制作。所谓回锅，就是再次烹调的意思。",
							"price": 12.5
						},
						{
							"id": 3,
							"name": "茄子",
							"type": "蔬菜",
							"icon": "/images/3.png",
							"description": "油淋茄子以茄子、鸡蛋、肉末、粉丝等为食材制成的一道精美的平民美食。",
							"price": 20.5
						},
						{
							"id": 4,
							"name": "宫保鸡丁",
							"type": "肉类",
							"icon": "/images/4.png",
							"description": "宫保鸡丁选用鸡肉为主料，佐以花生米、辣椒等辅料烹制而成；红而不辣、辣而不猛、香辣味浓、肉质滑脆；其入口鲜辣，鸡肉的鲜嫩可以配合花生的香脆。",
							"price": 34.5
						}
					],

					"typelist": [{
							"id": 1,
							"typename": "鱼类",
							"icon": "../../static/fish.png"
						},
						{
							"id": 2,
							"typename": "肉类",
							"icon": "../../static/meat.png"
						},
						{
							"id": 3,
							"typename": "菌菇类",
							"icon": "../../static/mashroom.png"
						},
						{
							"id": 4,
							"typename": "豆制品",
							"icon": "../../static/bean.png"
						},
						{
							"id": 5,
							"typename": "蔬菜",
							"icon": "../../static/vegitable.png"
						},
						{
							"id": 6,
							"typename": "酒水",
							"icon": "../../static/drink.png"
						},
						{
							"id": 7,
							"typename": "火锅",
							"icon": "../../static/hotpot.png"
						},

						{
							"id": 8,
							"typename": "水果",
							"icon": "../../static/fruit.png"
						}
					]
				}
			},
			methods: {
				loadData() {
					uni.request({
						url: 'http://localhost:8090/foodapp/category/list',
						method: 'POST',
						data: {},
					}).then(res => {
						this.categorylist = res.data.data;
						return uni.request({
							url: 'http://localhost:8090/foodapp/news/list',
							method: 'POST',
							data: {},
						});
					}).then(res => {
						this.newslist = res.data.data;
					}).catch(error => {
						console.error('Error while fetching data:', error);
					});
				},
				activeIndexChange(e) {
					console.log(e);
					this.activeIndex = e.detail.current
				},
				categoryChange(e) {
					this.activeIndex = e.currentTarget.dataset.index;
				}
			},
			onLoad() {
				this.loadData();
			}
		}
		onLoad: () => {
			uni.onTabBarMidButtonTap(function(e) {
				console.log(e)

			})

		}
	</script>

	<style>
		.container {
			font-size: 14px;
			line-height: 24px;
		}

		.tab-container {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			line-height: 80rpx;
		}

		.tab-item.tab-active {
			border-bottom: red solid 3px;
			background-color: #EEE;
		}
	</style>